<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld :msg="msg" @change="cg" />
  <hr />
  <!-- css使用js中动态变量 -->
  <h1 class="test">{{ hi }}</h1>
  <button @click="colors = 'pink'">修改css动态变量</button>
  <hr />
  <!-- 原生自定义组件 -->
  <mao-ye :hi="hi" />
</template>

<script setup>
import { ref, defineCustomElement } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import WebCp from './components/Web.vue'

// 普通响应变量
const msg = ref('Hello Vue 3.2 + Vite')
const hi = ref('猫爷')

// css使用变量
const colors = ref('red')
const border = ref('2px solid red')
console.log('需要加.value在js中访问：', border, border.value)

// 实验阶段：内置的$ref方法(https://github.com/vuejs/rfcs/discussions/369)
let size = $ref('80px')
console.log('$ref声明不需要加.value在js中访问：', size)


// 子传父回调
const cg = (hi) => {
  console.log(hi)
}

// 定义web自定义组件=》开发组件库，跨框架使用/SOA
const el = defineCustomElement(WebCp)
customElements.define('mao-ye', el)


// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.test {
  /* 使用js动态变量 */
  color: v-bind(colors);
  border: v-bind(border);
  font-size: v-bind(size);
}
</style>
